<template>
    <div>
        <div class="header">
            <h1>商品管理</h1>
            <button @click="$router.push('/save')">添加商品</button>
        </div>
        <div class="form-inline">
            <div class="form-group">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="form-group">
                <input type="text" class="form-contro" placeholder="关键字" v-model="values">
            </div>
            <button @click="getSearch">查询</button>
        </div>
        <!-- tab -->
        <table cellspacing='0'>
            <thead>
                <th width="5%">id</th>
                <th width="60%">信息</th>
                <th width="10%">价格</th>
                <th width="15%">状态</th>
                <th width="10%">操作</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>
                        <p>{{item.name}}</p>
                        <p>{{item.subtitle}}</p>
                    </td>
                    <td>{{item.price}}</td>
                    <td>
                        {{item.status==1?'在售':'已下架'}}
                        <button @click="change(item.status,item.id)" class="btn">{{item.status==1?'下架':'上架'}}</button>
                    </td>
                    <td>
                        <span @click="goDetail(item.id)">查看</span>
                        <span @click="goUpdata(item.id)">编辑</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNum" :page-size="page.pageSize" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>

    </div>
</template>
<script>
// import { commodity, changestatus, search } from '@/src/api/index';

export default {
    data() {
        return {
            list: [],
            page: {
                pageNum: 1,
                pageSize: 10
            },

            id: '',
            total: 0,
            values: '',
            value: '',
            options: [
                {
                    value: 'id',
                    label: '按商品id搜索'
                },
                {
                    value: 'name',
                    label: '按商品名称查询'
                }
            ],
            userlist: []
        };
    },
    methods: {
        goDetail(id) {
            this.id = id;
            this.$router.push({ name: 'comDetail', params: { id: this.id } });
        },
        goData() {
            commodity({
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize
            }).then(res => {
                console.log(res);
                this.list = res.data.data.list;
                this.total = res.data.data.total;
            });
        },
        // changestatus() {
        //   status({ productId: this.id, status: this.font }).then(res => {
        //     console.log(this.font);

        //   });
        // },
        getSearch() {
            if (this.values == '') {
                this.goData();
            }
            if (this.value == 'id') {
                search({ productId: this.values }).then(res => {
                    console.log(res);
                    this.list = res.data.data.list;
                    this.total = res.data.data.total;
                });
            }
            if (this.value == 'name') {
                search({ productName: this.values }).then(res => {
                    console.log(res);
                    this.list = res.data.data.list;
                    this.total = res.data.data.total;
                });
            }
        },
        change(status, productId) {
            console.log(status, productId);
            if (status == 1) {
                this.$confirm('是否将该商品下架?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        status = 0;
                        changestatus({ productId, status }).then(res => {
                            console.log(res);
                        });
                        this.goData();
                        this.$message({
                            type: 'success',
                            message: '下架成功!'
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消下架'
                        });
                    });
            } else {
                this.$confirm('是否将该商品上架?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        status = 1;
                        changestatus({ productId, status }).then(res => {
                            console.log(res);
                            this.goData();
                        });
                        this.$message({
                            type: 'success',
                            message: '上架成功!'
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消上架'
                        });
                    });
            }
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.goData();
        },
        handleCurrentChange(val) {
            this.page.pageNum = val;
            this.goData();
        },
        // 跳转编辑
        goUpdata(id) {
            this.id = id;
            this.$router.push({ name: 'save', params: { id: this.id } });
        }
    },
    mounted() {
        this.goData();
    }
};
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    h1 {
        font-size: 36px;
        font-weight: 350;
    }
    button {
        width: 101px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        color: #ffffff;
        background-color: #337ab7;
        border: none;
        border-radius: 4px;
    }
}
.form-inline {
    display: flex;
    .form-control {
        width: 182px;
        height: 34px;
        margin-right: 20px;
        text-align: center;
        border-radius: 4px;
    }
    .form-contro {
        width: 182px;
        height: 30px;
        margin-right: 20px;
        padding-left: 4px;
        border-radius: 4px;
    }
    button {
        width: 55px;
        height: 34px;
        border-radius: 4px;
    }
}
table {
    width: 100%;
    color: #333333;
    margin-top: 30px;
    text-align: left;
    border: 1px solid #cccccc;
    th {
        border: 1px solid #cccccc;
        height: 35px;
    }
    tr {
        border: 1px solid #cccccc;
        td {
            border: 1px solid #cccccc;
            height: 97.5px;
            vertical-align: top;
        }
    }
}
.btn {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    text-align: center;
    border: none;
}
span {
    color: #337ab7;
}
</style>

